<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="../../../css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="../../../js/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../../../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../../layui/css/layui.css">
    <script src="../../../layui/layui.js"></script>
    <script src="../../../js/city.data-3.js"></script>
</head>

<body>
<div style="padding:0px; margin:0px;">
 <ul class="breadcrumb" style="  margin:0px; " >
    	<li><a href="#">系统管理</a></li>
        <li>员工管理</li>
        <li>添加员工</li>
    </ul>
</div>

<form action="#" class="form-horizontal">
   	<div class="row">
    	<div class="col-sm-3 col-sm-offset-4">
        	<input  type="button" class="btn btn-success" value="保存"/>
            <input  type="reset" class="btn  btn-danger" value="取消"/>
        </div>
    </div>
    <h5 class="page-header alert-info" style="padding:10px; margin:0px; margin-bottom:5px;">基本信息</h5>
	<div class="row">
    	<div class="col-sm-5">
        	<div class="form-group">
            	<label class="col-sm-3 control-label">编号</label>
                <div class="col-sm-9">
                	<input type="text" name="staffId" class="form-control input-sm" placeholder="请输入编号"/>
                </div>
            </div>
        
        </div>
        <div class="col-sm-5">
            <div class="form-group">
            	<label class="col-sm-3 control-label">姓名</label>
                <div class="col-sm-9">
                	<input type="text" name="staffName" class="form-control input-sm" placeholder="请输入姓名"/>
                </div>
            </div>
        </div>

    </div>
    <!-- 开始2 -->
	<div class="row">
    	<div class="col-sm-5">
        	<div class="form-group">
            	<label class="col-sm-3 control-label">年龄</label>
                <div class="col-sm-5">
                	<input type="text" name="staffAge" class="form-control input-sm" placeholder="请输入年龄"/>
                </div>
            </div>
        
        </div>
        <div class="col-sm-5">
            <div class="form-group">
            	<label class="col-sm-3 control-label">性别</label>
                <div class="col-sm-4">
                		<select name="staffSex" class="form-control input-sm" >
                        	<option>保密</option>
                            <option>男</option>
                            <option>女</option>
                        </select>
                </div>
            </div>
        </div>
    </div>
    <!-- 结束2 -->
    <!-- 开始3 -->
	<div class="row">
    	<div class="col-sm-5">
        	<div class="form-group">
            	<label class="col-sm-3 control-label">籍贯</label>
                <div class="col-sm-6">
                    <div class="layui-form ">
                        <div class="layui-inline">
                            <select name="province" lay-verify="" lay-search lay-filter="province">
                                <option value="">请选择省份</option>
                            </select>
                        </div>
                        <div class="layui-inline">
                            <select name="city" lay-search lay-verify="" lay-filter="city">
                                <option value="">请选择一个城市</option>
                            </select>
                        </div>
                        <div class="layui-inline">
                            <select name="district" lay-search lay-verify="" lay-filter="district">
                                <option value="">请选择一个区县</option>
                            </select>
                        </div>

                    </div>
                </div>
            </div>
        
        </div>
        <div class="col-sm-5">
            <div class="form-group">
            	<label class="col-sm-3 control-label">身份证</label>
                <div class="col-sm-9">
                <input type="text" name="staffIdcard" class="form-control input-sm" placeholder="请输入身份证号码"/>
                </div>
            </div>
        </div>
    </div>
    <!-- 结束3 -->
        <!-- 开始4 -->
    <div class="row">
        <div class="col-sm-5">
            <div class="form-group">
                <label class="col-sm-3 control-label">家庭住址</label>
                <div class="col-sm-9">
                    <input type="text" name="staffAddr" class="form-control input-sm" placeholder="请输入家庭住址 "/>
                </div>
            </div>

        </div>

        <div class="col-sm-5">
            <div class="form-group">
            	<label class="col-sm-3 control-label">办公电话</label>
                <div class="col-sm-9">
                <input type="text" name="staffOfficePhone" class="form-control input-sm" placeholder="请输入办公电话"/>
                </div>
            </div>
        </div>
    </div>
    <!-- 结束4 -->
    <!-- 开始4 -->
	<div class="row">
    	<div class="col-sm-5">
        	<div class="form-group">
            	<label class="col-sm-3 control-label">电子邮件</label>
                <div class="col-sm-9">
                	<input type="text" name="staffEamil" class="form-control input-sm" placeholder="请输入电子邮件"/>
                </div>
            </div>
        
        </div>
        <div class="col-sm-5">
            <div class="form-group">
            	<label class="col-sm-3 control-label">移动电话</label>
                <div class="col-sm-9">
                <input type="text" name="staffMobilePhone" class="form-control input-sm" placeholder="请输入移动电话"/>
                </div>
            </div>
        </div>
    </div>
    <!-- 结束4 -->    
    <!-- 开始5 -->
    <div class="row">
        <div class="col-sm-5">
            <div class="form-group">
                <label class="col-sm-3 control-label">出生日期</label>
                <div class="col-sm-9">
                    <input type="date" name="staffBrithday" class="form-control input-sm" placeholder="请输入出生日期"/>
                </div>
            </div>

        </div>
        <div class="col-sm-5">
            <div class="form-group">
            	<label class="col-sm-3 control-label">QQ</label>
                <div class="col-sm-9">
                <input type="text" name="staffQq" class="form-control input-sm" placeholder="请输入QQ"/>
                </div>
            </div>
        </div>
    </div>
    <!-- 结束5 -->    
    <!-- 开始6 -->
	<div class="row">
    	<div class="col-sm-5">
        	<div class="form-group">
            	<label class="col-sm-3 control-label">入职时间</label>
                <div class="col-sm-9">
                	<input type="date" name="staffEntryTime" class="form-control input-sm" placeholder="请输入入职时间 "/>
                </div>
            </div>
        
        </div>
        <div class="col-sm-5">
            <div class="form-group">
            	<label class="col-sm-3 control-label">教育水平</label>
                <div class="col-sm-6">
                		<select name="staffEductionLevel" class="form-control input-sm" >
                        	<option>保密</option>
                        </select>
                </div>
            </div>
        </div>
    </div>
    <!-- 结束6 -->   
    <h5 class="page-header alert-info" style="padding:10px; margin:0px; margin-bottom:5px;">备注信息</h5>
    	<div class="row">
    	<div class="col-sm-10">
        	<div class="form-group">
            	<label class="col-sm-3 control-label">备注</label>
                <div class="col-sm-9">
                	<textarea class="form-control" name="staffRemark"></textarea>
                </div>
            </div>
        
        </div>

    </div>
        <h5 class="page-header alert-info" style="padding:10px; margin:0px; margin-bottom:5px;">账号信息</h5>
    	<div class="row">
        	<div class="col-sm-5">
        	<div class="form-group">
            	<label class="col-sm-3 control-label">账号</label>
                <div class="col-sm-9">
                	<input type="text" name="userNumber" class="form-control input-sm" placeholder="请输入账号 "/>
                </div>
            </div>
        
        </div>
        <div class="col-sm-5">
            <div class="form-group">
            	<label class="col-sm-3 control-label">密码</label>
                <div class="col-sm-9">
                <input type="password" name="userPassowrd" class="form-control input-sm" placeholder="请输入密码"/>
                </div>
            </div>
        </div>
    </div>
   	<div class="row">
    	<div class="col-sm-3 col-sm-offset-4">
        	<input  type="button" class="btn btn-success" value="保存"/>
            <input  type="reset" class="btn  btn-danger" value="取消"/>
        </div>
    </div>
</form>
<script type="text/javascript">


    var staffNativePlace="";

    layui.use('form', function(){
        var form = layui.form;
        var $ = layui.jquery;

        
        
        $.post("../../../AjaxDataDictionary.do?method=type",function (data) {
            for (let i = 0; i < data.length; i++) {
                $("[name=staffEductionLevel]").append(`<option>${data[i].dataContent}</option>`)
            }
        },"json")


        for (var i = 0; i < cityData3.length; i++) {
            let pr = cityData3[i];
            $("[name=province]").append(`<option>${pr.text}</option>`);
        }
        form.render(); //更新全部

        var province;
        form.on('select(province)', function(data){
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
            province = data.value;
            staffNativePlace="";
            staffNativePlace+=data.value
            for (var i = 0; i < cityData3.length; i++) {
                let pr = cityData3[i];
                if(pr.text == data.value){
                    $("[name=city]")[0].length=1;
                    for (var i = 0; i < pr.children.length; i++) {
                        let city = pr.children[i];
                        $("[name=city]").append(`<option>${city.text}</option>`);
                    }
                    break;
                }
            }
            form.render(); //更新全部
        });

        form.on('select(city)', function(data){
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
            staffNativePlace+=data.value;
            for (var i = 0; i < cityData3.length; i++) {
                let pr = cityData3[i];
                if(pr.text == province){
                    for (var i = 0; i < pr.children.length; i++) {
                        let city = pr.children[i];
                        if(city.text == data.value){
                            $("[name=district]")[0].length = 1;
                            for (var i = 0; i < city.children.length; i++) {
                                let district = city.children[i];
                                $("[name=district]").append(`<option>${district.text}</option>`);
                            }
                        }
                    }
                    break;
                }
            }
            form.render(); //更新全部
        });


        form.on('select(district)', function(data){
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
            staffNativePlace+=data.value
            console.log(staffNativePlace);
        });


    });

    //扩展jquery的格式化方法
    $.fn.parseForm=function(){
        var serializeObj={};
        var array=this.serializeArray();
        var str=this.serialize();
        $(array).each(function(){
            if(serializeObj[this.name]){
                if($.isArray(serializeObj[this.name])){
                    serializeObj[this.name].push(this.value);
                }else{
                    serializeObj[this.name]=[serializeObj[this.name],this.value];
                }
            }else{
                serializeObj[this.name]=this.value;
            }
        });
        return serializeObj;
    };
    
    $(function () {

        $(".btn-success").click(function () {
            let param = $(".form-horizontal").parseForm();
            param.staffNativePlace = staffNativePlace;
            console.log(param);
            $.post("AjaxStaffInfoServlet.do?m=add",param,function () {
                alert("添加成功!")
            })
        })
    })


</script>
</body>
</html>
